<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>all activities</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>

<!--<div class="top" style="margin-bottom: 20px"></div>-->

<ul class="mylayui-nav" style="z-index:1000;">
  <li class="mylayui-nav-item"><a href="/index">首页</a></li>
  <li class="mylayui-nav-item"><a href="/teachAffairManagement">教务管理</a></li>
  <li class="mylayui-nav-item"><a href="/mod3/index3">舍区管理</a></li>
  <li class="mylayui-nav-item"><a href="/mod3/index4">校园服务</a></li>

  <li class="mylayui-nav-item"><a href="">

    <img th:src="${headPic}" class="mylayui-nav-img" id="headPic">
    <span class="layui-badge-dot" id="dot" th:if="${msgs.size() gt 0}"></span>
  </a>

    <dl class="mylayui-nav-child">
      <dd>
        <a href="" id="role" th:text="${role}"></a>
      </dd>
      <dd>
        <a href="/message">
          消息
          <span class="layui-badge" id="msgCount"
                th:text="${msgs.size()}" th:if="${msgs.size()} gt 0">
                    </span>
        </a>
      </dd>
      <dd>
        <a href="/logout" th:if="${username} ne ''">
          注销
        </a>
        <a href="/login" th:if="${username} eq ''">
          登录
        </a>
      </dd>
    </dl>
  </li>
</ul>

<span class="layui-breadcrumb" lay-separator="|"
  style="margin: -100px 80px">
  <a href="" style="width:100px; margin: 0 50px">音乐</a>
  <a href="" style="width:100px; margin: 0 50px">节日</a>
  <a href="" style="width:100px; margin: 0 50px">体育</a>
  <a href="" style="width:100px; margin: 0 50px">美食</a>
  <a href="" style="width:100px; margin: 0 50px">美术</a>
  <a href="" style="width:100px; margin: 0 50px">游戏</a>
  <a href="/launchEvent" style="width:100px; margin: 0 50px">
    <img src="../static/edit.png" width="20px" height="20px" alt="">
    发布活动
  </a>
</span>

<div class="layui-bg-gray" style="padding: 60px; margin-left: 40px; margin-right: 50px">
  <div class="layui-row layui-col-space15">

    <!-- onclick="sendImg(this,${activity.getActivityID()})" -->
    <div class="layui-col-md6" th:each="activity,loopStatus:${activities}">
      <div class="layui-panel">
        <a th:onclick="sendImg(this,[[${activity.getActivityID()}]])"
           target="_blank" th:id="${loopStatus.count}"
        title="点我进行报名">
          <img th:src="${activity.getImgUrl()}" height="200px" width="300px">
          <span style="font-size: x-small; color: blue; " th:text="${activity.getDescription()}" id="description"></span>
        </a>
      </div>
    </div>

  </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  function sendImg(me,id){
    console.log(id);
    $.ajax({
      type : 'post',
      url : '/activitySignUp',
      data:{'url':$(me).children(":first").attr("src"),
        'description':$(me).children().eq(1).html(),
        'id':id},
      traditional : true,
      async : false,
      dataType: 'json',
      success : function(data){//成功的事件
        window.location.replace("/activitySignUp");
      },
      error : function(data){//失败的事件
        console.log("WWW");
      }
    });
  }

</script>


<!--<script type="text/javascript">-->
<!--  //在js中引入-->
<!--  $(document).ready(function () {-->
<!--    $('.top').load('head');-->
<!--  });-->
</script>
<script src="../static/layui/layui.js"></script>
<script>
  layui.use('carousel', function(){
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,width: '40%' //设置容器宽度
      ,arrow: 'hover' //始终显示箭头
      ,autoplay: true
    });
  });
</script>

</body>
</html>